<template>
	<div>
		<!--最上面的那个条件查询组件 -->
		<SearchForm ref="searchForm"  :classesInfo="classesInfo"></SearchForm>
		<!-- table组件 -->
		<Table :tableData="tableData"></Table>
		<!-- 分页组件 -->
		<PageAction :studentSearchForm="studentSearchForm" :pageSize="pageSize"></PageAction>
		<!-- 弹出框dialog组件 -->
		<Dialog ref="dialog" :classesInfo="classesInfo" :form="form" :isLook="isLook" :fromTitle="fromTitle" :isUpdate="isUpdate"></Dialog>
	</div>
</template>

<script>
import Axios from 'axios';

/* 引入api配置 */
import apiConfig from '../config/global.js';

/* --- 功能插件 --- */
/* 分页插件 */
import PageAction from './PageAction.vue';
/* 弹框插件 */
import Dialog from './Dialog.vue';
/* 主体显示的table */
import Table from './Table.vue';
/* 最上面的那个条件查询组件 */
import SearchForm from './SearchForm.vue';

export default {
	name: 'student',
	methods: {
		/* 查询学生信息 */
		search_studentInfo() {
			Axios.get(apiConfig.stuSearchApi, {
				params: this.studentSearchForm
			})
				.then(response => {
					//console.log(response.data.rows);
					this.tableData = response.data.rows;
					console.log(this.tableData);
					this.pageSize = response.data.total;
				})
				.catch(error => {
					//console.log(error);
				});
		},
		/* 查询班级信息 */
		search_classInfo() {
			Axios.get(apiConfig.clsSearchApi)
				.then(res => {
					//console.log(res.data);
					this.classesInfo = res.data;
				})
				.catch(err => {
					//console.log(err);
				});
		},
		/* 所有的Post操作 */
		axiosPost(api, params) {
			Axios.post(api, params)
				.then(res => {
					res = res.data;
					if (res.success) {
						this.$notify({
							title: '成功',
							message: res.message,
							type: 'success'
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: res.message
						});
					}
					this.search_studentInfo();
				})
				.catch(err => {
					//console.log(err);
				});
		},
		TestAxios(method, api, data) {
			Axios({
				method: 'post',
				data: data,
				url: api,
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}
			}).then(res => {
				//console.log(res);
			});
		},
		/* 在编辑页面是 选择不同的班级时实时更新表单的数据 */
		onSelectChange(val1) {
			let obj = {};
			obj = this.classesInfo.find(item => {
				//这里的selectList就是上面遍历的数据源
				return item.cid === val1; //筛选出匹配数据
			});
			//console.log(obj.cname); //我这边的name就是对应label的
			//console.log(obj.cid);
			this.form.classInfo = obj;
		}
	},

	data() {
		return {
			/* table里的所有的数据(这里是查询到的所有的学生信息) */
			tableData: [],
			/* 分页数据参数 一共多少条数据 默认0条(零条没有意义以查询后的数据为准)  */
			pageSize: 0,
			/* 查询到的所有的班级信息 */
			classesInfo: [],
			/* 点开的是否是查看按钮 */
			isLook: false, //查看按钮和删除按钮 true为编辑   false为查看
			isUpdate: false, //在打开dialog时 给确定按钮增加一个是添加还是修改的标识 true时修改 false 是添加
			form: {}, //dialog里的表单信息
			/* 表单中的框组的宽度 */
			formEmpData: {}, // 暂存数据
			fromTitle: '查看学生信息', //dialog的标题
			studentSearchForm: {
				/* sname: '',
				ssex: '',
				sclassid: '',
				starTime: '',
				endTime: '', */
				/* 分页数据参数 第几页 默认第一页 */
				page: 1,
				/* 分页数据参数 一页几条数据 默认一页五条 */
				limit: 5
			}, // 多条件查询的表单
			empDate: ''
		};
	},
	/* 生命周期函数 其中之一 */
	mounted() {
		/* 完成页面是要加载的方法 */
		/* 查询附带条件 */
		this.$refs.searchForm.onSearch();
		this.search_classInfo();
	},
	components: {
		/* 分页组件 */
		PageAction,
		/* 弹框组件 */
		Dialog,
		/* 主题显示的table */
		Table,
		/* 最上面的那个条件查询组件 */
		SearchForm
	}
};
</script>

<style scoped></style>
